<template lang="html">
  <div class="TanOperaBox" v-loading="loading">
    <p>{{productName}}</p>
    <p class="gray">上架时间 {{startSoldTime}}</p>
    <div class="tabBox">
      <div class="tabTitle">规格关联</div>
      <div class="tabRemind">注意：关联后，规格内容不可修改</div>

      <ul class="table" style="height: 40px; line-height: 40px;" >
        <li v-if="length>=1">{{txt1}}</li>
        <li v-if="length>=2">{{txt2}}</li>
        <li v-if="length>=3">{{txt3}}</li>
        <li class="price">价格(元)</li>
        <li class="quantity">库存</li>
        <li class="choose">选择剧场-区域</li>
      </ul>
      <ul class="table" style="border-top:none;">
        <li v-if="length>=1">
          <ul class="table2">
            <li v-for="item in arr1" :style="{height:(100/arr1.length)+'%',lineHeight:arr3.length==0?'40px':arr3.length/arr1.length*40+'px'}">
              <el-input :value="item" style="width:80%;" size="mini" placeholder="请输入内容"></el-input>
            </li>
          </ul>
        </li>
        <li v-if="length>=2">
          <ul class="table2">
            <li v-for="item in arr2" :style="{height:(100/arr2.length)+'%',lineHeight:arr3.length==0?'40px':arr3.length/arr2.length*40+'px'}">
              <el-input :value="item" style="width:80%;" size="mini" placeholder="请输入内容"></el-input>
            </li>
          </ul>
        </li>
        <li v-if="length>=3">
          <ul class="table2">
            <li v-for="item in arr3">
              <el-input  size="mini" :value="item" style="width:90%;"></el-input>
            </li>
          </ul>
        </li>
        <li class="price">
          <ul class="table2">
            <li v-for="item in skuList"  :style="{height:(100/arr3.length)+'%'}">{{item.price/100}}</li>
          </ul>
        </li>
        <li class="quantity">
          <ul class="table2">
            <li v-for="item in skuList">{{item.quantity}}</li>
          </ul>
        </li>
        <li class="choose">
          <ul class="table2">
            <li v-for="(item,index) in skuList" class="text-left">
              <span style="display:inline-block; width:120px; margin-left:5px;">
                <el-select v-model="skuList[index].opera" size="mini" @visible-change="changeType(index)" @change="getArea(index)" placeholder="请选择">
                  <el-option
                    v-for="list in skuList[index].operaOptions"
                    :label="list.name"
                    :value="list.id">
                  </el-option>
                </el-select>
              </span>
              <span style="display:inline-block; width:120px;">
                <el-select v-model="skuList[index].room" size="mini" placeholder="请选择">
                  <el-option
                    v-for="list in skuList[index].roomOptions"
                    :label="list.name"
                    :value="list.id">
                  </el-option>
                </el-select>
              </span>
            </li>
          </ul>
        </li>
      </ul>
    </div>
    <el-row style="margin-top:10px; text-align:right;">
      <el-button type="success" size="small" @click="sub">保存</el-button>
    </el-row>
  </div>
</template>

<script>
import axios from "axios"
var url;

export default {
  data() {
    return {
      skuList:[],
      productName:'',
      startSoldTime:'',
      length:1,
      txt1:'',
      txt2:'',
      txt3:'',
      arr1:[],
      arr2:[],
      arr3:[],
      lengthArr2:0,
      loading:false,
      type:false
    }
  },
  methods:{
    changeType:function (m){
      this.type=true;
      //this.skuList[n].room=[];
    },
    sub:function (){
      this.loading=true;
      var arr=[];
      for(let i in this.skuList){
        var json={};
        json.productId=this.$store.state.TanProduct.id;
        json.areaId=this.skuList[i].room;
        json.skuId=this.skuList[i].id;
        arr.push(json);
      }
      console.log(arr);
      axios.get(url+'/v1/product/link/scenicArea',{
        params:{
          links:JSON.stringify(arr)
        }
      }).then((res)=>{
        this.$message({
          showClose: true,
          message: '关联成功',
          type: 'success'
        });
        this.loading=false;
        this.$store.dispatch('closeDialog','TanProduct')
      }).catch((err)=>{
        console.log(err);
        this.$message({
          showClose: true,
          message: '错误',
          type: 'error'
        });
        this.loading=false;
      })
    },
    getMessage:function (){
      axios.get(url+'/v1/product/gets/scenicArea/linkInfo',{
        params:{
          productId:this.$store.state.TanProduct.id
        }
      }).then((res)=>{
        console.log(res.data);
        var data=res.data.data;
        var that=this;
        this.productName=data.productName;
        this.startSoldTime=data.startSoldTime;
        var arr1=data.linkList[0].name.split(';');
        this.length=arr1.length-1;

        var oArr = data.linkList[0].name.split(';');
        this.txt1=oArr[0].split(":")[0];
        this.txt2=oArr[1].split(":")[0];
        this.txt3=oArr[2].split(":")[0];
        //规格数组拼装
        var skuArr=[];
        for(let i in data.linkList){
          let arr = data.linkList[i].name.split(';');
          skuArr[i]=[];
          for(let k in arr){
            let num = arr[k].indexOf(':');
            let str = arr[k].substring(num+1,arr[k].length);
            skuArr[i].push(str);
          }
        }
        var array1=[],array2=[],array3=[];
        if(skuArr[0].length==2){
          for(let i in skuArr){
            array1.push(skuArr[i][0]);
          }
        }else if(skuArr[0].length==3){
          for(let i in skuArr){
            array1.push(skuArr[i][0]);
            array2.push(skuArr[i][1]);
          }
        }else if(skuArr[0].length==4){
          for(let i in skuArr){
            array1.push(skuArr[i][0]);
            array2.push(skuArr[i][1]);
            array3.push(skuArr[i][2]);
          }
        }
        this.arr1=unique1(array1);
        var newArr=unique1(array2),newArr2=unique1(array2);
        this.lengthArr2=newArr.length;
        console.log(this.arr1.length);
        for(let i=1;i<this.arr1.length;i++){
          newArr2=newArr2.concat(newArr);
        }
        this.arr2=newArr2;
        //console.log(this.arr2);
        this.arr3=array3;
        for(let i in data.linkList){
          data.linkList[i].opera=data.linkList[i].theaterId;
          data.linkList[i].operaOptions=[];
          data.linkList[i].room=data.linkList[i].areaId;
          data.linkList[i].roomOptions=[];
        //  that.getOptions(i,data.linkList);
        }
        this.skuList=data.linkList;
        this.getOpera();
      }).catch((err)=>{
        console.log(err);
      })
    },
    getArea:function (n,type){
      if(this.type){
        this.skuList[n].room=[];
      }
      if(this.skuList[n].opera){
        axios.get(url+'/v1/businessmen/gets/theater/area',{
          params:{
            id:this.skuList[n].opera
          }
        }).then((res)=>{
          console.log(res.data);
          this.skuList[n].roomOptions=res.data.data;
        }).catch((err)=>{
          console.log(err);
        })
      }
    },

    getOpera:function (){
      axios.get(url+'/v1/businessmen/gets/theater/param',{
        params:{
        }
      }).then((res)=>{
        for(let i=0;i<this.skuList.length;i++){
          this.skuList[i].operaOptions=res.data.data;
          this.getArea(i);
        }
      }).catch((err)=>{
        console.log(err);
      })
    },
    getOptions:function (n,list){
      console.log("2222");
      axios.get(url+'/v1/businessmen/gets/theater/area',{
        params:{
          id:list[n].opera
        }
      }).then((res)=>{
        this.skuList[n].roomOptions=res.data.data;
      }).catch((err)=>{
        console.log(err);
      })
    }
  },
  computed:{
    getId(){
      return this.$store.state.TanProduct.id;
    }
  },
  watch:{
    getId(val){
      this.type=false;
      this.getMessage();
    }
  },
  created(){
    url = this.$store.state.url;
    this.type=false;
    this.getMessage();
  }
}

function unique1(array){
var n = []; //一个新的临时数组
//遍历当前数组
for(var i = 0; i < array.length; i++){
//如果当前数组的第i已经保存进了临时数组，那么跳过，
//否则把当前项push到临时数组里面
if (n.indexOf(array[i]) == -1) n.push(array[i]);
}
return n;
}

</script>

<style lang="Sass" scoped>
.TanOperaBox{
  p{font-size: 12px; color: #333333; text-align: left;}
  .tabBox{margin-top: 35px; position: relative;
    .tabTitle{font-size: 12px; background: #fff; position: absolute; left: 0; top:-26px; border-radius: 4px 4px 0 0; z-index: 2013;padding: 5px;border: solid #DDDDDD; border-width: 1px 1px 0 1px;}
    .tabRemind{font-size: 12px; position: absolute; right: 0; top:-20px; color: #95989A;}
    .tab1{width: 100%; border:solid #DDDDDD; border-width:1px 0px 0px 1px;
      td{ height: 30px; padding-left: 5px; font-size: 12px; border:solid #DDDDDD; border-width:0px 1px 1px 0px; text-align: left;}
    }
    .table{width: 100%; list-style: none; display: flex; border:solid #DDDDDD; border-width:1px 0px 0px 1px;
     box-sizing: border-box;
      li{flex: 1; font-size: 12px; border:solid #DDDDDD; height: auto;
        border-width:0px 1px 1px 0px;}
      .price{flex: 0 0 80px;}
      .quantity{flex: 0 0 80px;}
      .choose{flex: 0 0 250px;}
      .table2{ width: 100%; height: 100%; list-style: none;
        li{width: 100%; line-height: 40px; box-sizing: border-box; border-right: 0px;}
        li:last-child{border-bottom: none;}
      }
    }
  }
}
</style>
